<script setup lang="ts">
import { toRefs, ref, toRef, watch, computed } from "vue";
import _ from "lodash";
import assets from "@/utils/assets";

let emit = defineEmits(["search", "input", "clear"]);

let props = withDefaults(
  defineProps<{
    placeholder: string;
    value: string;
    delay: number;
    highlight?: boolean;
    allowClear?: boolean;
  }>(),
  { placeholder: "", value: "", delay: 200 }
);

let { placeholder, delay, highlight, allowClear } = toRefs(props);
let value = toRef(props, "value");

let cache = {
  value: value.value,
};

let debouncedChange = _.debounce((val) => {
  if (cache.value !== val) {
    cache.value = val;
    emit("search", val);
  }
}, delay.value);

let handleChange = (evt: any) => {
  let val = evt.detail.value;
  emit("input", val);
  debouncedChange(val);
};
let handleDeleVal = () => {
  emit("clear");
  debouncedChange("");
};

let inpVal = ref(value.value);
watch(value, () => {
  inpVal.value = value.value;
});

let allowClearComputed = computed(() => {
  return allowClear?.value && inpVal.value;
});
</script>
<template>
  <div :class="highlight ? 'section-box section-box-highlight' : 'section-box'">
    <input
      type="text"
      class="search-input"
      :style="
        allowClearComputed
          ? {
              paddingRight: '100rpx',
            }
          : {}
      "
      v-model="inpVal"
      :placeholder="placeholder"
      placeholder-style="color: #909399; fontSize: 14px;"
      @input="handleChange"
      @change="handleChange"
    />
    <div class="delete_img_btn-wrap" v-if="allowClearComputed">
      <img
        :src="assets.delete_img_btn"
        class="delete_img_btn"
        @click="handleDeleVal"
      />
    </div>
  </div>
</template>
<style lang="less" scoped>
.section-box {
  // width: 690rpx;
  width: 100%;
  height: 74rpx;
  background: #ffffff;
  border-radius: 37rpx;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  .delete_img_btn-wrap {
    width: 60rpx;
    position: absolute;
    right: 0rpx;
    top: 0rpx;
    height: 100%;
    z-index: 11;
  }
  .delete_img_btn {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    top: 50%;
    right: 10rpx;
    transform: translateY(-50%);
  }
  .search-icon {
    width: 34rpx;
    height: 34rpx;
    position: absolute;
    z-index: 0;
  }
  .search-input {
    position: relative;
    z-index: 1;
    flex: 1;
    height: 74rpx;
    line-height: 74rpx;
    padding-left: 65rpx;
    padding-right: 15rpx;
    background-image: url("https://shilai-workflow-files.oss-cn-shenzhen.aliyuncs.com/9f95f3023edc4aa7baacabb75516b579_icon_ss.png");
    background-position: 26rpx 21rpx;
    background-repeat: no-repeat;
    background-size: 34rpx 34rpx;
    box-sizing: border-box;
  }
}

.section-box-highlight {
  border: 2rpx solid #3973ff;
  .search-input {
    background-image: url("https://shilai-workflow-files.oss-cn-shenzhen.aliyuncs.com/97edb9505faa4716b757507807b52202_icon_ss2x.png");
  }
}
</style>
